<script setup>
import { reactive, watch } from "vue";
const user = reactive({
  name: "tom",
  info: {
    gender: "男",
    age: 18,
  },
});

// 3. 监听响应式对象数据的一个数据，简单类型
// watch(()=>数据, 改变后回调函数)
watch(() => user.name, (newVlaue) => {
  console.log(`数据变化了, ${newVlaue}`)
})

watch(() => user.info.age, (newVlaue) => {
  console.log(`数据变化了, ${newVlaue}`)
})


// 2s改变数据
setTimeout(() => {
  user.name = 'jack';
}, 2000);

// 4s改变数据
setTimeout(() => {
  user.info.age = 60;
}, 4000);

</script>

<template>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
</template>